<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图表</title>
    <script src="../static/js/jquery-1.12.4.js"
            th:href=@{/js/jquery-1.12.4.js}></script>
    <script src="../static/js/echarts.min.js" th:href=@{/js/echarts.min.js}></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px; height: 450px;"></div>
<div style="width: 500px;height: 200px;" id = "errorid"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:20008/mysqlWebSocket");
        } else {
            alert('Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            var reslut = eval("(" + event.data + ")");
            if (reslut) {
                $.each(reslut, function (i, item) {
                    $("#main").append(item.id + "\t" + item.user_name + "\t" + item.business_email+"\r\n");
                });
            }
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            $('errorid').append(innerHTML);
        }
        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }
        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
    });
</script>
</body>
</html>
